<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8>
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no"/>
<meta content="yes" name="apple-mobile-web-app-capable"/>
<meta content="black" name="apple-mobile-web-app-status-bar-style"/>
<title>流量领取</title>
<script src="js/jquery-1.10.1.min.js"></script>
<script type="text/javascript" src="js/util.js"></script>
<link rel="stylesheet" type="text/css" href="css/style.css">
</head>
<body>
	<section class="get-flow">
		<ul class="flow-info">
			<li>省内流量：<span>XX</span></li>
			<li>国内流量：<span>XX</span></li>
		</ul>
		<form class="form-wrap">
			<p class="flow-sel">
				<label class="radio-wrap selected"><span class="radio"></span><input type="radio" name="flow"/><span>国内流量</span></label>
				<label class="radio-wrap"><span class="radio"></span><input type="radio" name="flow"/><span>省内流量</span></label>
				<span class="note">省内国内流量可以相互转换</span>
			</p>
			<div class="row">
				<label class="tit">请输入领取手机号码:</label>
				<div class="sel-phone">
					<span class="btn btn-red jq-add">添加亲情号码</span>
					<div>
						<select></select>
					</div>
				</div>
				<p class="note">（仅限于江西手机号码）</p>
			</div>
			<div class="row">
				<label class="tit">流量领取数</label>
				<ul class="amount">
					<li class="current">300M</li>
					<li>500M</li>
					<li>600M</li>
				</ul>
				<p class="note">如果当前没有适合您的充值流量,请继续关注,我们将陆续推出小额流量</p>
			</div>
			<p class="btn-wrap"><span class="btn btn-red">领取流量</span></p>
			<div class="warm-prompt">
				<h2>温馨提示</h2>
				<ol>
					<li>流量领取后,将于24小时内到账</li>
					<li>请您确认领取的手机号是否欠费或停机,欠费或停机的手机号请不要领取流量.</li>
					<li>因运营商(移动,联通,电信)流量仅当月有效,不结转,且不抵扣流量到账前已发生的流量.所以,建议尊敬的用户尽可能的于月初或套餐内流量未超过之前领取流量</li>
				</ol>
			</div>
		</form>

	</section>
	<div class="overlay"></div>
	<div class="tips-pop">
		<p></p>
	</div>
	<div class="dialog-modal add-phone can-add">
		<div>
			<div class="dialog-header">
				<h2>添加亲情号码</h2>
				<span class="dialog-close"></span>
			</div>
			<div class="dialog-content">
				<div class="vc-wrap">
					<div class="tips">您可以将流量充值到亲情号码，亲情号码最多设置三个，添加之后不可修改。注意不能是虚拟运营商的号码
						<p class="add-area"><label>添加手机号码:</label><span><input type="text"/></span></p>
					</div>
				</div>
			</div>
			<div class="dialog-footer">
				<span class="btn btn-normal jq-comfirm">确认</span><span class="btn btn-normal light jq-cancle">取消</span>
			</div>
		</div>
	</div>
	<!--流量不足-->
	<div class="dialog-modal flow-less">
		<div>
			<div class="dialog-header">
				<h2>添加亲情号码</h2>
				<span class="dialog-close"></span>
			</div>
			<div class="dialog-content">
				<div class="vc-wrap">
					<div class="tips">您要领取的 XX 流量不足 XX M，还差 XX M，可用 XX 流量 XX来兑换领取，您是否愿意？
						<p class="dialog-btn"><span class="btn btn-normal jq-cancle">取消</span><span class="btn btn-normal light jq-agree">同意</span></p>
					</div>
				</div>
			</div>
			<div class="dialog-footer">
				<a href="javascript:;" class="btn btn-normal">去赚流量</a>
			</div>
		</div>
	</div>
	<!--兑换流量-->
	<div class="dialog-modal exchange-flow">
		<div>
			<div class="dialog-header">
				<h2>兑换流量</h2>
				<span class="dialog-close"></span>
			</div>
			<div class="dialog-content">
				<div class="vc-wrap">
					<div class="tips t-left">您要流量余额不足，欢迎参加更多赚流量活来积攒您的流量
					</div>
				</div>
			</div>
			<div class="dialog-footer">
				<a href="javascript:;" class="btn btn-normal">去赚流量</a><span class="btn btn-normal light jq-cancle">确定</span>
			</div>
		</div>
	</div>
	<script type="text/javascript">
		$(document).ready(function(){
			$('.radio-wrap').on('click',function(){
				if($(this).hasClass('selected')){
					return;
				}else{
					$(this).addClass('selected');
					$(this).siblings().removeClass('selected');
				}

			});
			$('.jq-add').on('click',function(){
				//$('.can-add').mobDialog();
				//流量不足
				$('.flow-less').mobDialog();
			});
			$('.jq-cancle,.dialog-close').on('click',function(){
				$('.dialog-modal').mobDialog('close');
			});
			$('.jq-comfirm').on('click',function(){
				//如果成功$.mobAlert('添加亲情号码成功')
				$.mobAlert('您输入的号码不符合规范，请重新输入!');
				$('.add-phone').mobDialog('close');
			});
			$('.jq-agree').on('click',function(){
				$('.flow-less').mobDialog('close');
				$('.exchange-flow').mobDialog();
			});
			$('.amount li').on('click',function(){
				$('.amount li').removeClass('current');
				$(this).addClass('current');
			});
		});
	</script>
</body>
</html>